<template>
  <div class="tab-bar-item" @click="itemClick">
    <!-- 所有的item都展示同一个图片和文字 所以弄两个插槽 -->
    <div v-if="!isActive">
      <slot name="item-icon"></slot>
    </div>
    <div v-else>
      <slot name="item-icon-active"></slot>
    </div>
    <!-- 默认插槽会被替换 所以在外面包裹一个div 那么定义的active就会继承起效 -->
    <div :style="activeStyle">
      <slot name="item-text"></slot>
    </div>

    <!--<img src="../../assets/img/tabbar/menu1.png" alt="">-->
    <!--<div>首页</div>-->
  </div>
</template>

<script>
    export default {
        name: "",
        props:{
          path: String,  //接收点击过来的字符串路径
          activeColor:{
            type: String,
            default: 'red'
          }
        },
        data(){
          return {
            // isActive: true
          }
        },
        computed: {
          isActive(){//通过计算属性动态决定isActive值是否为true

            //this.$route.path 拿到的是处于活跃的那个路由
            //  /home -> item(/home) = true
            //  /home -> item(/fenlei) = false
            //  /home -> item(/cart) = false
            //  /home -> item(/my) = false
            //不等于-1表示找到  为true
            return this.$route.path.indexOf(this.path) !== -1
          },
          activeStyle(){ //判断isActive是否为true(活跃)
            return this.isActive==true? {color: this.activeColor} : {}
          }
        },
        methods:{
          itemClick(){ //每个item添加点击事件
            //push方法 带返回按钮
            this.$router.replace(this.path)
          }
        }
    }
</script>

<style>
  .tab-bar-item{
    flex: 1;  /* 平分比例 */
    text-align: center;
    height: 49px;   /* 导航栏一般高度为49px最佳 */
    font-size: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  .tab-bar-item img{
    height: 24px;
    width: 24px;
    vertical-align: middle;
  }
</style>
